<template>
<div>
  <el-breadcrumb separator-class="el-icon-arrow-right">
    <el-breadcrumb-item :to="{ path: '/admin/book-list' }">图书管理</el-breadcrumb-item>
    <el-breadcrumb-item>图书列表</el-breadcrumb-item>
  </el-breadcrumb>
  <el-divider></el-divider>
  <el-card style="width: 600px;height: 700px;margin: 0 auto">
    <el-form label-width="80px">
      <el-form-item label="图书标题">
        <el-input type="text" v-model="p.price"></el-input>
      </el-form-item>
      <el-form-item label="价格">
        <el-input type="text" v-model="p.oldPrice"></el-input>
      </el-form-item>
      <el-form-item label="原价">
        <el-input type="text" v-model="p.saleCount"></el-input>
      </el-form-item>
      <el-form-item label="销量">
        <el-input type="text" v-model="p.num"></el-input>
      </el-form-item>
      <el-form-item label="图书分类">
        <el-select v-model="p.categoryId">
          <el-option v-for="c in categoryArr" :label="c.name" :value="c.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="图书图片">
        <el-upload
            action="/upload"
            name="pic"
            :limit="1"
            list-type="picture-card"
            :on-success="handleSuccess"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove">
          <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
      </el-form-item>
      <el-form-item>
        <el-button type="success" @click="insert()">添加图书</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</div>
</template>

<script>
export default {
  name: "BookAddNew",
  data(){
    return{
      dialogImageUrl: '',
      dialogVisible: false,
      p:{
        title:"",
        price:"",
        oldPrice:"",
        saleCount:"",
        num:"",
        categoryId:"",
        url:""
      },
      categoryArr:[]
    }
  },
  methods:{
    insert(){
      if (this.p.url==""){
        this.$message.error("请选择上传的图片!");
        return;
      }
      //发出添加商品的请求
      axios.post("/product/insert",this.p).then(function (response) {
        location.href="/admin.html";

      })
    },
    handleSuccess(response,file,fileList){
      //response代表服务器响应的图片路径
      this.p.url = response;
    },
    goBack(){
      history.back();//返回上一页面
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
      //发出删除图片的请求
      axios.get("/remove?url="+this.p.url).then(function () {
        this.$message("服务器图片删除完成");
        this.p.url="";
      })
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    }
  },mounted() {
    //发请求获取分类数据
    axios.get("/category/select").then(function (response) {
      this.categoryArr = response.data;

    })
  }
}
</script>

<style scoped>

</style>